<template>
  <div class='interfaceTestWrapper'>
    <second-top></second-top>
    <div class="interfaceTest">
        <div class="interfaceTestLeft">
            <div class="testName">
                笑话大全-接口测试
            </div>
            <div class="testPoint">
                测试接入点： <el-select v-model="pointValue" placeholder="请选择">
                                <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                                </el-option>
                            </el-select>
            </div>
            <div class="inputPage">
                <span>page：</span><el-input v-model="interfaceModel.page" placeholder="请输入">
                </el-input>
            </div>
            <div class="inputPageSize">
                <span>pageSize：</span><el-input v-model="interfaceModel.pagesize" placeholder="请输入">
                </el-input>
            </div>
            <div class="btnWrapper">
                <button class="btn">调用接口</button>
            </div>
        </div>
        <div class="interfaceTestRight">
            <div class="resultTitle">
                输出（json）
            </div>
            <div class="resultContent" :style="{minHeight: resultHeight}">
                我是结果
            </div>
        </div>
    </div>
    <Footer class="footer"></Footer>
  </div>
</template>

<script>
import SecondTop from '@/components/top/secondtop.vue'
import Footer from '@/components/footer/footer.vue'
export default {
  name: 'InterfaceTest',
  data () {
    return {
      resultHeight: '',
      interfaceModel: {
        page: '',
        pagesize: ''
      },
      options: [
        {
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }
      ],
      pointValue: ''
    }
  },
  mounted () {
    this.resultHeight = window.innerHeight - 380 + 'px'
  },
  components: {
    SecondTop,
    Footer
  },
  created () {
    document.title = 'API-测试接口'
  },
  methods: {
  }
}
</script>

<style lang='stylus' scoped>
@import '~@/assets/css/variable.styl';
.interfaceTestWrapper {
    width 100%
    background-color white
    .interfaceTest {
        display flex
        .interfaceTestLeft {
            margin-top 20px
            margin-bottom 20px
            border 1px solid #EAEEFB
            width 30%
            .testName {
                padding 15px 0px
                text-align center
                background-color #F9FAFC
                border-bottom-style solid
                border-width:1px
                border-color: #E4E4E4
                color rgb(32, 160, 255)
                font-weight bold
            }
            .testPoint {
                font-size 14px
                padding 10px 10px
                background-color #F9FAFC
                border-bottom-style solid
                border-width:1px
                border-color: #E4E4E4
            }
            .inputPage {
                display flex
                margin-top 20px
                text-align right
                padding 0px 20px
                span {
                    color #48576a
                    font-size 14px
                    margin-right 20px
                }
            }
            .inputPageSize {
                display flex
                text-align right
                padding 0px 20px
                margin-top 20px
                span {
                    color #48576a
                    font-size 14px
                    margin-right 20px
                }
            }
            .btnWrapper {
                margin-bottom 30px
                .btn {
                    cursor pointer
                    margin-left 115px
                    margin-top 30px
                    color: white;
                    padding 10px 15px
                    border: solid 1px #F7BA2A;
                    border-radius 3px
                    background-color: #F7BA2A;
                    &:focus {
                    outline: none
                    }
                }
            }
        }
        .interfaceTestRight {
            width 70%
            margin-top 20px
            margin-left 20px
            margin-bottom 20px
            border 1px solid #EAEEFB
            .resultTitle {
                color #20a0ff
                background-color #F9FAFC
                padding 15px 15px
                box-shadow darkgrey 1px 1px 2px 1px
            }
            .resultContent {
                margin-right 18px
                background-color #002240
                color white
                padding 20px 20px
                font-size 14px
            }
        }
    }
}
.footer {
    position fixed
    bottom 0px
    width 100%
}
</style>
<style>
.inputPage .el-input__inner {
    width: 94%
}
</style>
